@import "../see/components";
.circleBar-top{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 0.89rem;
  line-height: 0.89rem;
  text-align: center;
  font-size: 0.34rem;
  color: #333;
  background: #fff;
  //border-bottom: 1px solid #f1f1f1;
  span {
    position: absolute;
    top: 50%;
    display: block;
    margin-top: -0.3rem;
    width: 0.6rem;
    height: 0.6rem;
  }
  .goback {
    left: 0.2rem;
    background: url(/imgs/see/selfMedia/selfMediaPage-goback.png) no-repeat center;
    background-size: 0.6rem 0.6rem;
  }
  .seeIndex-colse{
    right: 0.2rem;
    background: url(/imgs/friend/index/myPost-colse.png) no-repeat center;
    background-size: 0.5rem 0.5rem;
  }
}
.myPost-tab{
  position: fixed;
  top: 0.89rem;
  left: 0;
  width: 100%;
  z-index: 100;
  height: 0.82rem;
  line-height: 0.82rem;
  font-size: 0.28rem;
  color: #7c7c7c;
  border-bottom: 1px solid #e2e2e2;
  background: #fff;
  span{
    float: left;
    width: 50%;
    height: 0.78rem;
    text-align: center;
    border-bottom: 0.04rem solid transparent;
  }
  .active{
    color: #000;
    border-bottom-color: #0092ff;
  }
}
body{
  background: #f5f5f5;
}
.myFans{background: #fff;}
.myFans-list{
  position: relative;
  //padding: 0.2rem 0 0 0.24rem;
  background: #fff;
  //height: 1.19rem;
}
.myFans-list1{
  display: none;
}
.list-headImg{
  position: absolute;
  top: 0.2rem;
  left: 0.24rem;
  display: block;
  width: 0.96rem;
  height: 0.96rem;
  background: #e2e2e2;
  background-size: 100% 100%;
  border-radius: 50%;
}
.list-cent{
  margin-left: 1.17rem;
  padding: 0.2rem 1.5rem 0.25rem 0.24rem;
  height: 0.89rem;
  border-bottom: 1px solid #eee;
  h6{
    margin-bottom: 0.05rem;
    font-size: 0.32rem;
    font-weight: inherit;
    color: #333;
  }
  .list-level{
    margin-left: 0.2rem;
    display: inline-block;
    padding: 0 0.1rem 0 0.29rem;
    height: 0.25rem;
    line-height: 0.25rem;
    border-radius: 6px;
    font-size: 0.18rem;
    color: #fff;
  }
  .friendsList-boy {
    background: #83c6ff url("/imgs/friend/index/friendsList-boy.png") no-repeat 0.1rem center;
    background-size: 0.18rem 0.18rem;
  }
  .friendsList-girl {
    background: #ff8397 url("/imgs/friend/index/friendsList-girl.png") no-repeat 0.1rem center;
    background-size: 0.18rem 0.22rem;
  }
  p{
    font-size: 0.26rem;
    color: #999999;
    span{
      margin-left: 0.1rem;
    }
    strong{
      display: inline-block;
      margin-left: 0.15rem;
      padding-left: 0.15rem;
      font-weight: inherit;
      height: 0.3rem;
      line-height: 0.3rem;
      border-left: 1px solid #eee;
    }
  }
}
.friendIndex-news>div:last-child{
  .list-cent{
    border-bottom: none;
  }
}

//choiceList start
#choiceList{
  padding-top: 1.71rem;
  overflow: hidden;
  .list-cent h6{
    line-height: 1rem;
  }
  .myPost-tab{
    span{
      //width: 33%;
    }
    //span:nth-child(2){
    //  width: 34%;
    //}
  }
}
//choiceList end
//friendsList start
.friendsList-list{
  color: #333;
  background: #fff;
  a{
    position: relative;
    margin-left: 1.4rem;
    padding: 0.2rem 0.32rem 0.23rem 0.05rem;
    display: block;
    height: 0.96rem;
    line-height: 0.96rem;
    font-size: 0.32rem;
    background: #fff;
    border-bottom: 1px solid #e2e2e2;
  }
  a:last-child{
    border-bottom: none;
  }
  .friendsList-lyfiren,.list-topImg,.circleList-gcqz,.circleList-qyqz,.circleList-wdtz{
    position: absolute;
    left: -1.1rem;
    float: left;
    margin-right: 0.23rem;
    width: 0.96rem;
    height: 0.96rem;
    border-radius: 50%;
  }
  .friendsList-lyfiren{
    background: url("/imgs/friend/index/friendsList-lyfiren.png") no-repeat center;
    background-size: 100%;
  }
  .friendsList-more{
    position: absolute;
    top: 0;
    right: 0.2rem;
    display: inline-block;
    width: 0.6rem;
    height: 100%;
    background: url(/imgs/see/selfMedia/selfMedia-hotmore.png) no-repeat center;
    background-size: 0.6rem 0.6rem;
  }
  .list-top{
    padding-left: 0.27rem;
    height: 0.32rem;
    line-height: 0.32rem;
    background: #f1f1f1;
    font-size: 0.24rem;
  }
  .list-topImg{
    background-size: 100% 100%;
    //background: #ccc;
  }
  .list-topGrade{
    margin-left: 0.2rem;
    display: inline-block;
    padding: 0 0.1rem 0 0.29rem;
    height: 0.25rem;
    line-height: 0.25rem;
    border-radius: 6px;
    font-size: 0.18rem;
    color: #fff;
  }
  .friendsList-boy {
    background: #83c6ff url("/imgs/friend/index/friendsList-boy.png") no-repeat 0.1rem center;
    background-size: 0.18rem 0.18rem;
  }
  .friendsList-girl {
    background: #ff8397 url("/imgs/friend/index/friendsList-girl.png") no-repeat 0.1rem center;
    background-size: 0.18rem 0.22rem;
  }
}
//friendsList end
//circleList start
.circleList{
  font-size: 0;
  .friendsList-list{
    a{
      color: #333;
      div{
        display: block;
        line-height: 0.5rem;
        color: #333;
      }
      h6{font-size: 0.32rem;}
      p{
        font-size: 0.26rem;
        color: #999;
        span{
          margin: 0 0.1rem;
        }
      }
    }
  }

}
.list-topImg{
  top: 50%;
  margin-top: -0.48rem;
  display: inline-block;
}
.circleList-gcqz{
  background: url("/imgs/friend/index/circleList-gcqz.png") no-repeat center;
  background-size: 0.96rem 0.96rem;
}
.circleList-qyqz{
  background: url("/imgs/friend/index/circleList-qyqz.png") no-repeat center;
  background-size: 0.96rem 0.96rem;
}
.circleList-wdtz{
  background: url("/imgs/friend/index/circleList-wdtz.png") no-repeat center;
  background-size: 0.96rem 0.96rem;
}
//circleList end
#chatPage{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  //body{
  //  background: #f5f5f5;
  //}
  background: #f5f5f5;
  .chatPage-top{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8vh;
    line-height: 8vh;
    text-align: center;
    background: #fefefe;
    font-size: 0.34rem;
    color: #333333;
    span {
      position: absolute;
      top: 0;
      display: block;
      width: 0.6rem;
      height: 100%;
    }
    .goback {
      left: 0.2rem;
      background: url(/imgs/see/selfMedia/selfMediaPage-goback.png) no-repeat left center;
      background-size: 0.6rem 0.6rem;
    }
    .chatPage-topImg {
      right: 0.2rem;
      background: url(/imgs/purchase/index/purchase-more2.png) no-repeat center;
      background-size: 0.6rem 0.6rem;
    }
  }
  .chatPage-butt{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8vh;
    line-height: 8vh;
    text-align: left;
    background: #fefefe;
    font-size: 0;
    border-top: 1px solid #eee;
    input{
      margin: 0 0.2rem 0;
      width: 80.5%;
      height: 0.6rem;
      background: transparent;
      border: none;
      font-size: 0.3rem;
      color: #999;
      vertical-align: middle;
    }
    //span{
    //  position: absolute;
    //  top: 50%;
    //  display: block;
    //  margin-top: -0.3rem;
    //}
    //.chatPage-yyin{
    //  width: 0.6rem;
    //  height: 0.6rem;
    //  left: 0.2rem;
    //  background: url(/imgs/friend/index/chatPage-yyin.png) no-repeat left center;
    //  background-size: 0.6rem 0.6rem;
    //}
    .chatPage-add{
      position: absolute;
      top:0;
      right: 0;
      display: block;

      width: 1rem;
      height: 100%;
      //line-height: 0.6rem;
      text-align: center;
      background-color: #d45048;
      //border-radius: 0.08rem;
      font-size: 13px;
      color: #fff;
      //background: url(/imgs/friend/index/chatPage-add.png) no-repeat left center;
      //background-size: 0.6rem 0.6rem;
    }
  }
  .chatPage-cent{
    margin-top: 8vh;
    padding: 2vh 0.3rem;
    height: 80vh;
    overflow-y: auto;
    font-size: 0.2rem;
    color: #7b7b7b;
    >div{
      position: relative;
      margin-bottom: 0.5rem;
    }
    .centlist-head{
      position: absolute;
      top: 0.1rem;
      display: block;
      width: 0.72rem;
      height: 0.72rem;
      background-size: 100%;
      border-radius: 50%;
      //background: #ccc;
    }
    p{
      margin-bottom: 0.1rem;
    }
    .centlist-cent{
      position: relative;
      display: inline-block;
      padding: 0.22rem 0.2rem 0.22rem 0.3rem;
      max-width: 90%;
      word-wrap:break-word;
      word-break:break-all;
      font-size: 0.32rem;
      text-align: left;
      color: #333333;
      background: #fff;
      border-radius: 0.08rem;
    }
    .centlist-cent:after{
      content: "";
      width: 0;
      height: 0;
      position:absolute;
      top:0.1rem;
      border-top: 0.2rem solid #fff;
    }
    .chatPage-centData{ margin-bottom: 0;}
    .centlist-img{
      img{
        width: 100%;
        max-height: 40vh;
      }
    }
  }
  .chatPage-centData{
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    span{
      margin-left: 0.1rem;
    }
  }
  .chatPage-centlist{
    padding:0 0.59rem 0 0.96rem;
    .centlist-head{
      left: 0;
    }
    .centlist-cent:after{
      border-left: 0.2rem solid transparent;
      left: -0.18rem;
    }
  }
  .chatPage-centlist1{
    text-align: right;
    padding: 0 0.96rem 0 0.59rem;
    .centlist-head{
      right: 0;
    }
    .centlist-cent:after{
      border-right: 0.2rem solid transparent;
      right: -0.18rem;
    }
  }
  .centlist-unknown{
    strong{
      float: left;
      margin-right: 0.25rem;
    }
    //h6,p{
    //  padding-left: 0.3rem;
    //}
    h6{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      white-space: inherit;
    }
  }
  .centlist-unknown,.centlist-unknown1{
    strong{
      width: 1rem;
      height: 1rem;
      background-size: 100% 100%;
    }
    h6{
      margin-top: -0.05rem;
      font-size: 0.26rem;
      color: #333;
    }
    p{
      margin-left: 0.3rem;
      margin-bottom: 0;
      font-size: 0.2rem;
      color: #999;
    }
  }
  .centlist-unknown1{
    strong{
      float: right;
    }
    h6,p{
      padding-right: 1.2rem;
      text-align: right;
    }
  }
}
#forward{
  padding-top: 0.89rem;
  overflow: hidden;
}

.centlist-shop{
  padding: 0.22rem 0 0.22rem 0 !important;
  h6{
    padding: 0 0.25rem;
    font-size: 0.3rem;
    color: #333;
    span{
      color: #EF593C;
    }
  }
  .coupon-list{
    //position: absolute;
    //top: 0.97rem;
    position: relative;
    //width: 91.7%;
    margin-top: 0.2rem;
    padding: 0.15rem 0.15rem 0 0.25rem;
    height:1.4rem;
    background: #fff;
    font-size: 0;
    border-top: 1px solid #e2e2e2;
    .slide-img,.coupon-icon,.coupon-icon1,.coupon-icon2{
      position: absolute;
      display: block;
    }
    .coupon-icon,.coupon-icon1,.coupon-icon2{
      top: 0.19rem;
      right: 0.19rem;
      z-index: 10;
      width: 1.6rem;
      height: 1.4rem;
    }
    .coupon-icon{
      background: url("/imgs/purchase/coupon/coupon-icon.png") no-repeat center;
      background-size: 100% 100%;
    }
    .coupon-icon1{
      background: url("/imgs/purchase/coupon/coupon-icon1.png") no-repeat center;
      background-size: 100% 100%;
    }
    .coupon-icon2{
      background: url("/imgs/purchase/coupon/coupon-icon2.png") no-repeat center;
      background-size: 100% 100%;
    }
    .coupon-lableIcon,.coupon-txt{
      position: absolute;
      left: 0.25rem;
      display: block;
      width: 0.8rem;
      height: 0.8rem;
    }
    .coupon-lableIcon{
      top: 0.2rem;
      z-index: 10;
      background: url(/imgs/purchase/coupon/coupon-lableIcon.png) no-repeat center;
      background-size: 100% 100%;
    }
    .coupon-txt{
      top: 0.15rem;
      z-index: 100;
      text-align: center;
      font-size: 0.16rem;
      color: #fff;
      transform:rotate(-45deg);
      -ms-transform:rotate(-45deg); 	/* IE 9 */
      -moz-transform:rotate(-45deg); 	/* Firefox */
      -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
      -o-transform:rotate(-45deg); 	/* Opera */
    }
    .slide-img{
      top: 0.2rem;
      left: 0.25rem;
      width: 1.4rem;
      height: 1.4rem;
      background: #eee;
      background-size: 100% 100%;
    }
    h6,span,p{
      position: relative;
      z-index: 11;
      padding: 0 0 0 1.7rem;
    }
    h6{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.24rem;
      color: #666;
    }
    .bursting-icon3{
      margin: 0.12rem 0 0.15rem;
      display: block;
      width: 1.2rem;
      height: 0.32rem;
      background: url("/imgs/purchase/coupon/bursting-icon3.png") no-repeat 1.65rem center;
      background-size: 1.2rem 0.32rem;
    }
    span{
      font-size: 0.2rem;
      color: #EF593C;
    }
    p{
      margin-bottom: 0.05rem;
      font-size: 0.2rem;
      color: #999;
    }
  }
}
.list-topGrade{
  margin-left: 0.2rem;
  display: inline-block;
  padding: 0 0.1rem 0 0.29rem;
  height: 0.25rem;
  line-height: 0.25rem;
  border-radius: 6px;
  font-size: 0.18rem;
  color: #fff;
}
.friendsList-boy {
  background: #83c6ff url("/imgs/friend/index/friendsList-boy.png") no-repeat 0.1rem center;
  background-size: 0.18rem 0.18rem;
}
.friendsList-girl {
  background: #ff8397 url("/imgs/friend/index/friendsList-girl.png") no-repeat 0.1rem center;
  background-size: 0.18rem 0.22rem;
}